<style lang="less">
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
  background-color: transparent!important;
  background-image: none !important;
  box-shadow: 0 0 0 1000px white inset !important;
}
</style>

<style lang="less" scoped>
@import "../../assets/css/config.less";
.flex-row{
  display: flex;
  justify-content: flex-end;
}
a{
  color: @color1;
}
.bak{
  position: absolute;
  width: 100%;
  bottom: 0;
}

#login{
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  Microsoft YaHei, SimSun, sans-serif;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: @header-bgc;
}
.bg {
  position: absolute;
}
.form {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  text-align: center;
  margin-top: 150px;
  p{
    color: rgb(109, 108, 108);
    font-size: 14px;
    margin: 0 2px;
  }
}
.ft {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.ft a {
  font-size: 14px;
  text-decoration: none;
  color: @color1;
}
.button{
  line-height: 24px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 14px;
  margin: 0;
  width: 100%;
  letter-spacing: 2px;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 15px;
  box-shadow: none;
}
.button:hover{
  background-color: @color2;
  box-shadow: none;
  color: @white
}
.button:active{
  background-color: @color3;
  box-shadow: none;
  color: @white
}
</style>
<template>
  <div id="login">
    <Row type="flex" justify="center">
      <!-- <img src="../../assets/login.jpg" alt :style="bg" /> -->
      <Col span="5">
        <Card class="form">
          <div slot="title">涅槃之路</div>
          <Form ref="formInline" :model="formInline" :rules="ruleInline">
            <FormItem prop="username">
              <Input
                style="margin-top: 20px"
                type="text"
                v-model="formInline.username"
                placeholder="用户名"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-person-outline" /> -->
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input
                type="password"
                v-model="formInline.password"
                placeholder="密码"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-lock-outline" /> -->
              </Input>
            </FormItem>
            <FormItem>
              <Button class="button" style="margin-top: 10px" @click="handleSubmit('formInline', formInline)">登录</Button>
            </FormItem>
          </Form>
          <div class="ft">
            <div @click.stop="signin">
              <a>注册</a>
            </div>
            <div class="flex-row" @click.stop="refindPass">
              <a>找回密码</a>
              <p style="padding: 0 3px">/</p>
              <a>用户名</a>
            </div>
            <!-- <a
              href="https://open.weixin.qq.com/connect/qrconnect?appid=wxfc715cd8dabb5ca4&redirect_uri=http://www.ourspark.org/api/wexin/login&response_type=code&scope=snsapi_login&state=123#wechat_redirect"
            >使用微信登录或注册</a>-->
          </div>
        </Card>
      </Col>
    </Row>
    <Row class="bak" type="flex" justify="center">
      <a href="http://www.beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号: 京ICP备17048321号</a>
    </Row>
  </div>
</template>
<script>
import { requestLogin } from "../../api/api";
import * as coreJS from "../../utils/core";
export default {
  name: "login",
  data() {
    return {
      formInline: {
        username: "",
        password: ""
      },
      ruleInline: {
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            type: "string",
            message: "请输入用户名",
            trigger: "blur,change"
          }
        ],
        password: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ]
      },
      bg: {
        width: `${window.innerWidth}px`,
        height: `${window.innerHeight}px`,
        position: "absolute"
      }
    };
  },
  computed: {
    mdpassword: function() {
      return coreJS.encryptedPassword(this.formInline.password);
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.bg.height = `${window.innerHeight}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
  },
  methods: {
    refindPass() {
      this.$router.push({
        name: "refindPass"
      });
    },
    signin() {
      this.$router.push({
        name: "signin"
      });
    },
    handleSubmit(name, form) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var loginParams = {
            username: form.username,
            password: this.mdpassword
          };
          requestLogin(loginParams)
            .then(response => {
              if (response.state === true) {
                this.$Message.success("登录成功");

                let token = response.token;
                let UUID = response.UUID;
                let user = response.user;
                this.$store.commit("set_token", {
                  token,
                  UUID,
                  user
                });
                this.$router.push("/");
              } else {
                this.$Message.error(response.msg);
              }
            })
            .catch(error => {
              this.$Message.error("用户名或密码错误！");
            });
        } else {
          this.$Message.error("登录信息不完整!");
        }
      });
    }
  }
};
</script>
